<template>
  <div class="secKillList">
    <el-scrollbar class="listBar">
      <div class="top">
        <div></div>
        <h1>秒杀优惠卷</h1>
        <el-button type="info" :icon="CloseBold" circle @click="back"></el-button>
      </div>

      <el-divider  />

      <div class="itemBar">
        <secKillItem v-for="item in items" :item="item" />
      </div>
    </el-scrollbar>
  </div>

</template>

<script setup>
import { ref, defineModel } from 'vue'
import {CloseBold} from "@element-plus/icons-vue";
import secKillItem from "@/components/activity/secKill/secKillItem.vue";
import {listVoucher} from "@/apis/voucher.js";

const openSecKill = defineModel('openSecKill')

const items = ref([])

const back = () => {
  openSecKill.value = false
}

const getData = async () => {
  listVoucher().then(res => {
    items.value.push(...res.rows)
  })
}

getData()
</script>

<style scoped>
.secKillList{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  height: 100vh;
  width: 205vh;
  background-color: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.listBar{
  height: 80vh;
  width: 150vh;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.top{
  height: 10vh;
  width: 145vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.itemBar{
  min-height: 50vh;
  width: 145vh;
  background-color: #f5f5f5;

  display: flex;
  flex-wrap: wrap;
}
</style>
